class Paginator {
    constructor(domRoot, onPageChangeCallback, conf) {
        this.domRoot = domRoot
        this.onPageChangeCallback = onPageChangeCallback

        this.defaultRootStyeles = {
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
        }
        this.conf = {
            totalPages: 100,
            page: 1,
            activePagerClassName: "active",
            ...conf
        }
        this.currentPage = this.conf.page
        this.render()
    }

    render() {
        console.log("render", this.currentPage);

        this.domRoot.innerHTML = `
        <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px;" id="btnFirst">first</div>
        <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px;" id="btnPrev">prev</div>
        
        <div style="display: flex; justify-content: center; align-items: center;" class="pagers">${this.generatePagersHtml()}</div>

        <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px;" id="btnNext">next</div>
        <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px;" id="btnLast">last</div>
        <input id="ipPage" type="number" style="outline: none; width: 50px; height: 20px;">
        <button id="btnGo" style="outline: none; width: 30px; height: 24px; margin-left: 5px;">go</button>
        `
        // 给根布局追加一些行间样式
        for (let attr in this.defaultRootStyeles) {
            this.domRoot.style[attr] = this.defaultRootStyeles[attr]
        }

        this.addEventListeners()
        this.updatePagers()
    }

    // 

    // 生成页码
    generatePagersHtml() {
        function generate(thisArg, arr = []) {
            let html = ""
            arr.forEach(
                ([start, end]) => {
                    console.log("generate", start, end);
                    if (start && end) {
                        for (let i = start; i <= end; i++) {
                            html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;" class="pager ${(i === thisArg.currentPage ? thisArg.conf.activePagerClassName : "")}">${i}</p>`
                        }
                    } else {
                        html += " ... "
                    }
                }
            )
            return html
        }

        let html = ""
        // 当前位于边缘页
        if (this.currentPage <= 5 || this.currentPage >= this.conf.totalPages - 4) {
            // for (let i = 1; i <= 5; i++) {
            //     html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
            // }
            // html += "..."
            // for (let i = this.conf.totalPages - 4; i <= this.conf.totalPages; i++) {
            //     html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
            // }
            html += generate(this, [
                [1, 5],
                [],
                [this.conf.totalPages - 4, this.conf.totalPages]
            ])
        }

        // 当前位于腹地页
        else {
            // for (let i = 1; i <= 2; i++) {
            //     html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
            // }
            // html += "..."
            // for (let i = this.currentPage - 2; i <= this.currentPage + 2; i++) {
            //     html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
            // }
            // html += "..."
            // for (let i = this.conf.totalPages - 1; i <= this.conf.totalPages; i++) {
            //     html += `<p style="border: 1px solid rgb(51, 51, 51); margin: 0px 5px; padding: 0px 5px;">${i}</p>`
            // }
            html += generate(this, [
                [1, 3],
                [],
                [this.currentPage - 2, this.currentPage + 2],
                [],
                [this.conf.totalPages - 2, this.conf.totalPages]
            ])
        }

        return html
    }


    // 翻页
    turnToPage(n) {
        n = n * 1
        n = n < 1 ? 1 : n
        n = n > this.totalPages ? this.totalPages : n
        this.currentPage = n

        this.render()
        this.onPageChangeCallback(n)
    }

    // 
    updatePagers() {
        this.ipPage.value = this.currentPage
        switch (this.currentPage) {
            case 1:
                this.conf.inactiveBtnClassName && this.btnPrev.classList.add(this.conf.inactiveBtnClassName)
                this.btnPrev.onclick = null
                break;
            case this.conf.totalPages:
                this.conf.inactiveBtnClassName && this.btnNext.classList.add(this.conf.inactiveBtnClassName)
                this.btnNext.onclick = null
                break;
            default:
                break;
        }
    }

    // 找出控件
    findComponents() {
        this.btnFirst = this.domRoot.querySelector("#btnFirst")
        this.btnLast = this.domRoot.querySelector("#btnLast")
        this.btnPrev = this.domRoot.querySelector("#btnPrev")
        this.btnNext = this.domRoot.querySelector("#btnNext")
        this.btnGo = this.domRoot.querySelector("#btnGo")
        this.ipPage = this.domRoot.querySelector("#ipPage")
        this.pagers = this.domRoot.querySelectorAll(".pager")
    }

    // 事件
    addEventListeners() {
        this.findComponents()
        this.btnFirst.onclick = e => {
            this.turnToPage(1)
        }
        this.btnLast.onclick = e => {
            this.turnToPage(this.conf.totalPages)
        }
        this.btnPrev.onclick = e => {
            this.turnToPage(this.currentPage - 1)
        }
        this.btnNext.onclick = e => {
            this.turnToPage(this.currentPage + 1)
        }
        this.btnGo.onclick = e => {
            this.turnToPage(this.ipPage.value)
        }
        this.pagers.forEach(
            pager => pager.addEventListener(
                "click",
                (e) => this.turnToPage(e.target.innerText)
            )
        )
    }
}